<template>
	<u-popup :show="visible" :round="10" mode="bottom" closeOnClickOverlay="true" @close="visible=false">
		<view class="">
			<view class="popup">
				 <view class="tip">
					 
					<text>积分兑换余额</text>
				 </view>
				 
				 <view class="box">
					 <view class=""> 兑换比例为 100:1 </view>
					 <view style="font-size: 28rpx;color: #277EEF;" @click="setall"> 全部兑换 </view>
				 </view>
				 <view class="box">
					 <view class=""> <input type="number" v-model="integral" placeholder="请输入积分" /> </view>
					 <view class="flex">
						<u-icon name="plus-circle" color="#2979ff" size="28" @click="add('plus')"></u-icon>
					 	<u-icon name="minus-circle" color="#2979ff" size="28" @click="add('minus')"></u-icon>
					 </view> 
				 </view>
				 <view class="box">
					 <view class=""> 兑换余额：<text>￥{{exchangeBalance}}</text> </view>
					 <view style="font-size: 28rpx;color: #277EEF;" >   </view>
				 </view>
				 <view class="txt">说明：积分兑换余额后，不可撤销！</view>
				 
			</view>
			 
			<view class="woodsbtn" style="width: 90%;margin: 20rpx auto;" @click="handleChange">
				确认
			</view>
		</view>
		</u-popup> 
	 
</template>

<script>
	import { userInfoAPI,createpointAPI} from "@/api/user.js"
	export default {
		name:"woods-popupModal",
		props: {
			point:{
				 type:Number || String,
				 default:0
			},
			show:{ 
				type:Boolean,
				default:false
			}, 
		},
		watch:{
			show(flag) {
				this.visible=flag
			},
			integral(val){
				if(!val)return
				this.exchangeBalance=val/100
			}
		},
		data() {
			return {
				visible:false,
				integral:'',
				exchangeBalance:0
			};
		},
		 
		methods:{
			add(type){
				let integral=this.integral *1
				if(type=='minus'){
					if(integral-100 <0){
						return uni.showToast({
							title:'不能再减啦',
							icon:'none'
						})
					}
					this.integral=integral-100
				}else{
					if(integral+100 >this.point){
						return uni.showToast({
							title:'没那么多积分',
							icon:'none'
						})
					}
					this.integral=integral+100
				}
				
			},
			setall(){
				this.integral=this.point
			},
			/*
			@description 回调事件
			@extends {flag=true 确认 flag:false 取消}
			*/ 
			handleChange(flag){
				createpointAPI({
					"point":this.integral,
					"exchangeBalance": this.exchangeBalance 
				}).then(res=>{
					uni.showToast({
						title:'兑换成功'
					})
					this.visible=false
					this.$emit("handleChange")
				})				
				
			}
		}
	}
</script>

<style scoped lang="scss">
 
.popup {
    padding: 40rpx; 
	.tip{
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 30rpx;
			margin-right: 10rpx;
		}
		text{
			font-weight: bold;
			font-size: 38rpx;
			color: #333333;
		}
	}
	.box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		view{
			font-weight:500;
			font-size: 28rpx;
			color: #333333;
			 
			input{
				border-radius: 8rpx;
				border: 2rpx solid #277EEF;
				line-height: 40rpx;
				height: 60rpx;
				padding-left: 20rpx;
			}
			text{
				font-weight: bold;
				font-size: 40rpx;
				color: #F93A59;
			}
		}
	}
	.txt{
		font-weight: 400;
		font-size: 28rpx;
		color: #AAAAAA;
		padding: 20rpx 0;
	}
	.btn{
		font-weight: bold;
		font-size: 32rpx;
		color: #277EEF;
		line-height: 68rpx;
		text-align: center;
		margin-top: 15rpx;
	}
}
.btn2{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	line-height: 98rpx;
	text-align: center;
}
</style>